<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS练习1</title>
</head>
<body>
    <style>
        .one{
            /* 字体家族 */
            font-family: '宋体';
            /* 字体大小 */
            font-size: 20px;
            /* 字体粗细 */
            font-weight: 900;
        }
        .two{
            font-family: '隶书';
            font-size: 40px;
            font-weight: lighter;
            /* 字体倾斜，主要使用这个东西来取消倾斜 */
            font-style: italic;
        } 


        .three a{
            /* 文本颜色 */
            color:red;
            /* 文本对齐 */
            text-align: left;
            /* 文本装饰，设置下划线和删除线，最常用的还是把下划线和删除线去掉 */
            text-decoration: none;
        }
        .four{
            /* 文本颜色 */
            color: rgb(179, 164, 166);
            /* 文本对齐 */
            text-align: center;
        }
        .five{
            /* 文本颜色 */
            color: #22ffff;
            /* 文本对齐 */
            text-align: right;
        }
        .five{
            /* 文本颜色 */
            color: rgba(red, green, blue, alpha);
        }
        .a{
            /* 文本缩进 绝对单位，针对像素*/
            text-indent: 20px;
        }
        .b{
            /* 文本缩进 em为相对单位，相对于当前元素的文字大小*/
            text-indent: 2em;
        }
        p {
            /* 文本行高，可通过行高设置文本垂直居中 */
            line-height: 20px;
        }
        .f {
            width:500px;
            height:500px;
            font-size: 20px;
            text-align: center;
            /* 块级元素设置文本垂直居中 */
            line-height: 500px;
            /* 设置背景图片 */
            background-image: url(doge.jpg);
            /* 设置背景图片为不平铺 */
            /* background-repeat: no-repeat; */
            /* 设置背景图片为水平平铺，同理，y可以设置垂直平铺 */
            background-repeat: no-repeat;
            /* 设置背景图片的位置，计算机的平面直角坐标系是左手系，分别设置横纵坐标 */
            /* background-position: 200px 250px; */
            /* 通过文字设置位置 */
            background-position: center top;
            /* 设置背景图片大小，像素，单词 */
            /* background-size: 100px; */
            /* contain（可能会露出一部分背景色，即一部分背景覆盖不到）,cover（会全覆盖当前背景，不会露出）单词会进行自适应 */
            background-size: cover;
            /* 圆角矩形，设置四个角的弧度大小，单位：px,em,百分比（50%就是圆形）还有顺时针分开设置 */
            border-radius: 50%;
        }

        .g {
            width: 500px;
            height: 300px;
            /* 设置边框的宽度，颜色和样式，边框会撑大原块级元素的大小 */
            border: 2px red dashed;
            /* 让边框挤压内容，不要撑大元素 */
            box-sizing: border-box;
            /* 设置内边距，内容和边框之间的距离，也可以通过padding-(left,right,top,bottom)设置四个方向的内边距 */
            padding: 10px;
            /* 设置外边距，如果上下两个元素外边距不一样，那么就会造成塌陷，之间的距离会选择外边距较大值 */
            margin: 2px;
            background-color: #22ffff;
        }

        .h {
            width: 200px;
            height: 100px;
            /* 设置边框的宽度，颜色和样式，边框会撑大原块级元素的大小 */
            border: 2px red dashed;
            /* 让边框挤压内容，不要撑大元素 */
            box-sizing: border-box;
            /* 设置内边距，内容和边框之间的距离，也可以通过padding-(left,right,top,bottom)设置四个方向的内边距 */
            padding: 10px;
            /* 设置外边距 */
            /* 基于外边距，实现元素的水平居中 */
            margin: 0 auto;
            background-color: blueviolet;
        }
    </style>
    <!--
    <div class="one">这是一行字</div>
    <div class="two">这是另一行字</div>
    <div class="three"><a href="#">这是一段话</a></div>
    <div class="four">这是另一段话</div>
    <div class="five">这是另一段话</div>
    <div class="six">这是另一段话</div>
    -->

    <!-- <p class="a">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea expedita, vitae ab exercitationem rem, unde quidem placeat harum quaerat quas dolorem ullam. Recusandae ut perspiciatis provident dolore blanditiis nisi quasi.
    </p>
    <p class="b">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea expedita, vitae ab exercitationem rem, unde quidem placeat harum quaerat quas dolorem ullam. Recusandae ut perspiciatis provident dolore blanditiis nisi quasi.
    </p> -->
    
    <!-- <p class="c">上一行</p>
    <p class="d">中间行</p>
    <p class="e">下一行</p> -->

    <!-- <div class="f">这是一行字</div> -->

    <!-- <div class="g">这是一个元素</div> -->
    <div class="g">
        <div class="h">这是一个元素</div>
    </div>
</body>
</html>